<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="车牌号" prop="carNumber">
        <el-input
          v-model="queryParams.carNumber"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="驾驶员" prop="driveName">
        <el-input
          v-model="queryParams.driveName"
          placeholder="请输入驾驶员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="进场日期" prop="comeTime">
        <el-date-picker clearable
                        v-model="queryParams.comeTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择进场日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="离场日期" prop="outTime">
        <el-date-picker clearable
                        v-model="queryParams.outTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择离场日期">
        </el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="押运员" prop="escortName">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.escortName"-->
      <!--          placeholder="请输入押运员"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="挂车号" prop="trailerCardId">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.trailerCardId"-->
      <!--          placeholder="请输入挂车号"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="发货单位" prop="forwardingUnit">
        <el-input
          v-model="queryParams.forwardingUnit"
          placeholder="请输入发货单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收货单位" prop="receivingUnit">
        <el-input
          v-model="queryParams.receivingUnit"
          placeholder="请输入收货单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出发地" prop="originPlace">
        <!--        <el-input-->
        <!--          v-model="queryParams.originPlace"-->
        <!--          placeholder="请输入出发地"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <el-cascader
          size="large"
          :options="options"
          v-model="originPlace1"
          @change="handleChange1"
          placeholder="请输入出发地"
        >
        </el-cascader>
      </el-form-item>
      <!--      <el-form-item label="通行时间" prop="passLoadTime">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.passLoadTime"-->
      <!--          placeholder="请输入通行时间"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="预约类型" prop="reportType">
        <el-select v-model="queryParams.reportType" placeholder="请选择">
          <el-option
            v-for="item in dict.type.report_type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--      <el-table-column label="序号" width="55" align="center" prop="id" />-->
      <el-table-column label="序号" width="55" align="center" prop="serialNumber"/>
      <!--      <el-table-column label="审核状态" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span v-if="scope.row.state==0"> 待审核 </span>-->
      <!--          <span v-if="scope.row.state==1"> 已通过 </span>-->
      <!--          <span v-if="scope.row.state==2"> 不通过 </span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="登记单位" align="center" prop="company"/>-->
      <el-table-column label="驾驶员" align="center" prop="driveName" width="100"/>
      <el-table-column label="车牌号" align="center" prop="carNumber" width="120"/>
      <el-table-column label="出发地" align="center" prop="originPlace" width="180">
        <template slot-scope="scope">
          <span>{{(scope.row.originPlace+"").split("|")[1] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进场日期" align="center" prop="comeTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.comeTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="离场日期" align="center" prop="outTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.outTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约类型" align="center" prop="reportType" width="150">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.report_type" :value="scope.row.reportType"/>
        </template>
      </el-table-column>
      <el-table-column label="车辆正面照片" align="center" prop="imgUrl">
        <template slot-scope="scope">
          <el-image v-if="scope.row.imgUrl"
                    :src="scope.row.imgUrl"
                    :preview-src-list="scope.row.imgUrl.split(',')">
          </el-image>
        </template>
      </el-table-column>
      <!--      <el-table-column label="驾驶证号" align="center" prop="driveCardId"/>-->
      <!--      <el-table-column label="押运员" align="center" prop="escortName"/>-->
      <!--      <el-table-column label="押运员证号" align="center" prop="escortCardId"/>-->
      <!--      <el-table-column label="挂车号" align="center" prop="trailerCardId"/>-->
      <!--      <el-table-column label="行驶证" align="center" prop="drivingLicenseCard"/>-->
      <!--      <el-table-column label="危险货物运输证" align="center" prop="dangerCardId"/>-->
      <!--      <el-table-column label="车辆所属公司" align="center" prop="carCompany"/>-->
      <!--      <el-table-column label="车辆最大载重" align="center" prop="maxLoad"/>-->
      <el-table-column label="发货单位" align="center" prop="forwardingUnit"/>
      <el-table-column label="收货单位" align="center" prop="receivingUnit"/>
      <!--      <el-table-column label="通行路线" align="center" prop="trafficRoute"/>-->
      <!--      <el-table-column label="通行时间" align="center" prop="passLoadTime"/>-->
      <el-table-column label="申请时间" align="center" prop="createTime"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-release"
            @click="handleAudit(scope.row)"
          >审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="detail(scope.row)"
          > 详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          > 修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改预约记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div class="barrier barrier100">
          <el-form-item label="申请类型">
            <el-select v-model="form.reportType" placeholder="请选择运输类型"  :disabled="this.title == '查看申请'">
              <el-option
                v-for="item in dict.type.report_type"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <template v-if="form.reportType">
          <div class="barrier">
            <el-form-item label="登记单位" prop="company">
              <el-input v-model="form.company" placeholder="请输入登记单位" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="登记时间" prop="createTime">
              <el-input v-model="form.createTime" placeholder="请输入登记时间" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="进场日期" prop="comeTime">
              <el-date-picker clearable
                              v-model="form.comeTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择进场日期" :disabled="this.title == '查看申请'">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="离场日期" prop="outTime">
              <el-date-picker clearable
                              v-model="form.outTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择离场日期" :disabled="this.title == '查看申请'">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="通行期限" prop="driveName">
              <el-input readonly  v-model="form.passLoadTime" placeholder="请输入通行期限" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="驾驶员" prop="driveName">
              <el-input v-model="form.driveName" placeholder="请输入驾驶员" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="驾驶证号" prop="driveCardId">
              <el-input v-model="form.driveCardId" placeholder="请输入驾驶证号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="车牌号" prop="carNumber">
              <el-input v-model="form.carNumber" placeholder="请输入车牌号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="出发地" prop="originPlace">
              <el-cascader
                size="large"
                :options="options"
                v-model="originPlace"
                @change="handleChange"
                placeholder="请输入出发地"
                :disabled="this.title == '查看申请'"
              >
              </el-cascader>
            </el-form-item>
          </div>
        </template>


        <!--        权限区-->
        <!--        工作人员-->

        <template v-if="form.reportType=='worker'">
          <div class="barrier">
            <el-form-item label="部门" prop="department">
              <el-input v-model="form.department" placeholder="请输入部门" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="车辆型号" prop="carType">
              <el-input v-model="form.carType" placeholder="请输入车辆型号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>

          <div class="barrier">
            <el-form-item label="行驶证" prop="drivingLicenseCard">
              <el-input v-model="form.drivingLicenseCard" placeholder="请输入行驶证" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="通行路线" prop="trafficRoute">
              <el-input v-model="form.trafficRoute" placeholder="请输入通行路线" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>

          <div class="barrier barrier100">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
        </template>

        <!--        危险-->

        <template v-if="form.reportType=='danger'">
          <div class="barrier">
            <el-form-item label="行驶证" prop="drivingLicenseCard">
              <el-input v-model="form.drivingLicenseCard" placeholder="请输入行驶证" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="通行路线" prop="trafficRoute">
              <el-input v-model="form.trafficRoute" placeholder="请输入通行路线" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="押运员" prop="escortName">
              <el-input v-model="form.escortName" placeholder="请输入押运员" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="押运员证号" prop="escortCardId">
              <el-input v-model="form.escortCardId" placeholder="请输入押运员证号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="运输货物" prop="freight">
              <el-input v-model="form.freight" placeholder="请输入运输货物" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="车辆所属公司" prop="carCompany">
              <el-input v-model="form.carCompany" placeholder="请输入车辆所属公司" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="挂车号" prop="trailerCardId">
              <el-input v-model="form.trailerCardId" placeholder="请输入挂车号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="危险货物运输证" prop="dangerCardId">
              <el-input v-model="form.dangerCardId" placeholder="请输入危险货物运输证" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="发货单位" prop="forwardingUnit">
              <el-input v-model="form.forwardingUnit" placeholder="请输入发货单位" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="收货单位" prop="receivingUnit">
              <el-input v-model="form.receivingUnit" placeholder="请输入收货单位" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="车辆最大载重" prop="maxLoad">
              <el-input v-model="form.maxLoad" placeholder="请输入车辆最大载重" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
        </template>

        <!--        货物运输-->
        <template v-if="form.reportType=='goods'">
          <div class="barrier">
            <el-form-item label="通行路线" prop="trafficRoute">
              <el-input v-model="form.trafficRoute" placeholder="请输入通行路线" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="车辆所属公司" prop="carCompany">
              <el-input v-model="form.carCompany" placeholder="请输入车辆所属公司" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="收货单位" prop="receivingUnit">
              <el-input v-model="form.receivingUnit" placeholder="请输入收货单位" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="发货单位" prop="forwardingUnit">
              <el-input v-model="form.forwardingUnit" placeholder="请输入发货单位" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="挂车号" prop="trailerCardId">
              <el-input v-model="form.trailerCardId" placeholder="请输入挂车号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="运输货物" prop="freight">
              <el-input v-model="form.freight" placeholder="请输入运输货物" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="车辆最大载重" prop="maxLoad">
              <el-input v-model="form.maxLoad" placeholder="请输入车辆最大载重" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="行驶证" prop="drivingLicenseCard">
              <el-input v-model="form.drivingLicenseCard" placeholder="请输入行驶证" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier barrier100">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>

        </template>

        <!--       临时车辆 -->
        <template v-if="form.reportType=='temporary'">
          <div class="barrier">
            <el-form-item label="车辆型号" prop="carType">
              <el-input v-model="form.carType" placeholder="请输入车辆型号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="所属单位" prop="unitName">
              <el-input v-model="form.unitName" placeholder="请输入所属单位" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="挂车号" prop="trailerCardId">
              <el-input v-model="form.trailerCardId" placeholder="请输入挂车号" :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="通行路线" prop="trafficRoute">
              <el-input v-model="form.trafficRoute" placeholder="请输入通行路线" :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier">
            <el-form-item label="事由" prop="mainContent">
              <el-input v-model="form.mainContent" placeholder="请输入事由"  :disabled="this.title == '查看申请'"/>
            </el-form-item>
            <el-form-item label="同行人员" prop="peerPersonnel">
              <el-input v-model="form.peerPersonnel" placeholder="请输入同行人员"  :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
          <div class="barrier barrier100">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注"  :disabled="this.title == '查看申请'"/>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" v-if="this.title != '查看申请'" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--    // handleClose-->
    <el-drawer
      title="审核信息"
      :size="'90%'"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">


      <div class="div_all">

        <div class="div1">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>出发地</span>
              <el-button style="float: right; padding: 3px 0" type="text">{{this.cityName}}</el-button>
            </div>
            <div class="text item">
              <span>
                到达政策
              </span>
              <div class="in_policy_div">
                <span class="in_policy" v-for="(item,i) in in_policy" :key="i">{{item}}</span>
              </div>
              <span>
                出发政策
              </span>
              <div class="out_policy_div in_policy_div">
                <span class="out_policy" v-for="(item,i) in out_policy" :key="i">{{item}}</span>
              </div>
              <div class="out_policy_div in_policy_div">
                <div class="out_policy" v-for="(item,i) in risk_area_list" :key="i">
                  <span v-if="item.type==1"><el-tag type="danger">高风险</el-tag>{{item.name}}</span>
                  <span v-if="item.type==2"><el-tag type="danger">中风险</el-tag>{{item.name}}</span>
                </div>
              </div>

            </div>
          </el-card>
        </div>

        <div class="div2">
          <el-card class="box-card box-card-s">
            <!--        重要信息-->
            <!-- 货物信息 通行时间 联系电话 -->
            <div class="box-card">
              <el-descriptions class="margin-top" title="重要信息" :column="3" size="medium" border>
                <template slot="extra">
                  <!--              <el-button type="primary" size="small">操作</el-button>-->
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    运输货物
                  </template>
                  {{form.freight}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    进场日期
                  </template>
                  {{form.comeTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    离场日期
                  </template>
                  {{form.outTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    通行时间
                  </template>
                  {{form.passLoadTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    联系电话
                  </template>
                  {{form.phone}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    备注
                  </template>
                  {{form.remarks}}
                </el-descriptions-item>
              </el-descriptions>
            </div>


            <div class="box-card">


              <el-descriptions class="margin-top" title="人员信息" :column="3" size="medium" border>
                <template slot="extra">
                  <!--              <el-button type="primary" size="small">操作</el-button>-->
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    驾驶员
                  </template>
                  {{form.driveName}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    驾驶证号
                  </template>
                  {{form.driveCardId}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    押运员
                  </template>
                  {{form.escortName}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    押运员证号
                  </template>
                  {{form.escortCardId}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    备注
                  </template>
                  {{form.remarks}}
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="box-card">
              <!-- 车辆信息-->
              <el-descriptions class="margin-top" title="车辆信息" :column="3" size="medium" border>
                <template slot="extra">
                  <!--              <el-button type="primary" size="small">操作</el-button>-->
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    车牌号
                  </template>
                  {{form.carNumber}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    行驶证号
                  </template>
                  {{form.drivingLicenseCard}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    最大载重
                  </template>
                  {{form.maxLoad}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    挂车号
                  </template>
                  {{form.trailerCardId}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    车辆所属公司
                  </template>
                  {{form.carCompany}}
                </el-descriptions-item>
              </el-descriptions>
            </div>


            <!-- 其他数据-->
            <div class="box-card">
              <el-descriptions class="margin-top" title="其他数据" :column="3" size="medium" border>
                <template slot="extra">
                  <!--              <el-button type="primary" size="small">操作</el-button>-->
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    危险货物运输证
                  </template>
                  {{form.dangerCardId}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    发货单位
                  </template>
                  {{form.forwardingUnit}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    收货单位
                  </template>
                  {{form.receivingUnit}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    出发地
                  </template>
                  {{form.originPlace}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    通行路线
                  </template>
                  {{form.trafficRoute}}
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <div class="box-card">
              <span class="card-shenhe">分配车位</span>
              <el-form v-if="reserveTotal>0">
                <el-form-item>
                  <el-select v-model="form.opinionInfo">
                    <el-option :label="item.addrName" :value="item.addrId" v-for="item in reserveList"
                               :key="item.addrId"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-form v-else>
                <el-form-item>
                  <span>暂无可用车位</span>
                </el-form-item>
              </el-form>
            </div>

            <div class="box-card">
              <span class="card-shenhe">审核意见</span>
              <el-form>
                <el-form-item>
                  <el-input type="textarea" v-model="form.examineOpinion"></el-input>
                </el-form-item>
              </el-form>
            </div>

            <div class="box-card">
              <div class="btn">
                <el-row>
                  <el-button type="success" @click="pass(1)">&nbsp;&nbsp;通过</el-button>
                  <el-button type="danger" @click="pass(2)">不通过</el-button>
                </el-row>
              </div>
            </div>

          </el-card>
        </div>

      </div>

    </el-drawer>
  </div>
</template>

<script>
    import {
        provinceAndCityData,
        regionData,
        provinceAndCityDataPlus,
        regionDataPlus,
        CodeToText,
        TextToCode
    } from "element-china-area-data";
    import {listInfo, getInfo, delInfo, addInfo, updateInfo, getyingqing, updateInfoStatus} from "@/api/system/info";
    import {clientUrl} from "@/api/client";

    export default {
        name: "Info",
        dicts: ['report_type'],
        data() {
            return {
                optionsType: [{
                  value: 'worker',
                  label: '工作人员车辆申请'
                }, {
                  value: 'danger',
                  label: '危化品车辆申请'
                }, {
                  value: 'goods',
                  label: '货物运输车辆申请'
                }, {
                  value: 'temporary',
                  label: '临时车辆申请'
                }],
                options: regionData,
                originPlace: [],
                originPlace1: [],
                staff_jobs: [],
                in_policy: "",
                out_policy: "",
                in_policy_date: "",
                out_policy_date: "",
                risk_area_list: "",
                drawer: false,
                direction: 'rtl',
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 预约记录表格数据
                infoList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    state: null,
                    company: null,
                    comeTime: null,
                    outTime: null,
                    carNumber: null,
                    driveName: null,
                    driveCardId: null,
                    escortName: null,
                    escortCardId: null,
                    trailerCardId: null,
                    drivingLicenseCard: null,
                    dangerCardId: null,
                    carCompany: null,
                    maxLoad: null,
                    forwardingUnit: null,
                    receivingUnit: null,
                    originPlace: null,
                    trafficRoute: null,
                    examineTime: null,
                    reportType: null,
                    passLoadTime: null
                },

                reserveListParam: {
                    url: '/api/find/GetReservableInfo',
                    serviceCode: 'getReservableInfo',
                    enterTime: null,
                    leaveTime: null,
                },
                reserveList: [],
                reserveTotal: 0,
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                cityName: ""
            };
        },
        created() {
            this.getList();
        },
        methods: {
            handleChange() {
                var loc = "";
                var locode = "";
                for (let i = 0; i < this.originPlace.length; i++) {
                    if (i >= this.originPlace.length - 1) {
                        loc += CodeToText[this.originPlace[i]];
                        locode += this.originPlace[i];
                    } else {
                        loc += CodeToText[this.originPlace[i]] + "-";
                        locode += this.originPlace[i] + "-";
                    }
                    //    150000-150100-150105|内蒙古自治区-呼和浩特市-赛罕区
                }
                this.form.originPlace = locode + "|" + loc
            },
            handleChange1() {
                var loc = "";
                var locode = "";
                for (let i = 0; i < this.originPlace1.length; i++) {
                    if (i >= this.originPlace1.length - 1) {
                        loc += CodeToText[this.originPlace1[i]];
                        locode += this.originPlace1[i];
                    } else {
                        loc += CodeToText[this.originPlace1[i]] + "-";
                        locode += this.originPlace1[i] + "-";
                    }
                    //    150000-150100-150105|内蒙古自治区-呼和浩特市-赛罕区
                }
                this.queryParams.originPlace = locode
                // alert(loc);
            },
            /** 查询预约记录列表 */
            getyiqing() {
                if (!this.city) {
                    return false;
                }
                // https://ditu.so.com/app/yiqing/policy?from=220100
                getyingqing(this.city).then(response => {
                    let object = JSON.parse(response.msg);
                    this.in_policy = object.data[this.city]['in_policy'];
                    this.out_policy = object.data[this.city]['out_policy'];
                    this.in_policy_date = object.data[this.city]['in_policy_date'];
                    this.out_policy_date = object.data[this.city]['out_policy_date'];
                    this.risk_area_list = object.data[this.city]['risk_area_list'];
                    this.cityName = object.data[this.city]['city'];
                    console.log(object);
                    if (!this.in_policy) {
                        this.city = this.form.originPlace.split('|')[0].split('-')[0] + "";
                        getyingqing(this.city).then(response => {
                            let object = JSON.parse(response.msg);
                            this.in_policy = object.data[this.city]['in_policy'];
                            this.out_policy = object.data[this.city]['out_policy'];
                            this.in_policy_date = object.data[this.city]['in_policy_date'];
                            this.out_policy_date = object.data[this.city]['out_policy_date'];
                            this.risk_area_list = object.data[this.city]['risk_area_list'];
                            this.cityName = object.data[this.city]['city'];
                            console.log(object);
                        });
                    }
                });

            },
            getList() {
                this.loading = true;
                this.queryParams.state = 2;
                listInfo(this.queryParams).then(response => {
                    this.infoList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            handleClose() {
                this.drawer = false;
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    state: null,
                    company: null,
                    comeTime: null,
                    outTime: null,
                    carNumber: null,
                    driveName: null,
                    driveCardId: null,
                    escortName: null,
                    escortCardId: null,
                    trailerCardId: null,
                    drivingLicenseCard: null,
                    dangerCardId: null,
                    carCompany: null,
                    maxLoad: null,
                    forwardingUnit: null,
                    receivingUnit: null,
                    originPlace: null,
                    trafficRoute: null,
                    createTime: null,
                    updateTime: null,
                    examineTime: null,
                    passLoadTime: null
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加申请信息";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids;
                console.log(row.originPlace);
                getInfo(id).then(response => {
                    this.form = response.data;
                    this.originPlace = (this.form.originPlace.split('|')[0]).split("-");
                    console.log(this.originPlace);
                    this.open = true;
                    this.title = "修改申请表";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateInfo(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addInfo(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除预约记录车牌号为"' + row.carNumber + '"的数据项？').then(function () {
                    return delInfo(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            detail(row) {
                this.reset();
                this.form.showDetail = true;
                const id = row.id || this.ids
                getInfo(id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.originPlace = (this.form.originPlace.split('|')[0]).split("-");
                    this.title = "查看申请";
                });
            },
            handleAudit(row) {
                const ids = row.id || this.ids;
                getInfo(ids).then(response => {
                    this.form = response.data;
                    this.reserveListParam.enterTime = this.form.comeTime;
                    this.reserveListParam.leaveTime = this.form.outTime;
                    this.drawer = true
                    this.title = "审核申请表";
                    if (this.form) {
                        let originPlace = "" + this.form.originPlace;
                        console.log(this.form);
                        console.log(originPlace);
                        if (originPlace.indexOf("-") != -1 && originPlace.indexOf("|") != -1) {
                            this.city = this.form.originPlace.split('|')[0].split('-')[1];
                            this.getyiqing();
                        }
                    }
                    //查询车位
                    clientUrl(this.reserveListParam).then(response => {
                        let data = JSON.parse(response.data.data)
                        console.log(data);

                        this.reserveList = data.reserveList;
                        this.reserveTotal = parseInt(data.totalNum);
                    });
                });
                this.reportInfo = "";

            },
            /** 导出按钮操作 */
            handleExport() {
                this.download('system/info/export', {
                    ...this.queryParams
                }, `info_${new Date().getTime()}.xlsx`)
            },
            pass(state) {
                let opinionInfo = this.form.opinionInfo;
                this.form.reserveType = "";
                this.form.reserveId = "";
                this.form.reserveName = "";
                this.reserveList.forEach(el => {
                    if (el.addrId == opinionInfo) {
                        this.form.reserveType = el.type;
                        this.form.reserveId = el.addrId;
                        this.form.reserveName = el.addrName;
                    }
                })

                this.form.state = state;

                let msg = "";
                if (state == 1) {
                    msg = "此操作将通过该申请，是否继续？";
                } else if (state == 2) {
                    msg = "此操作将拒绝该申请，是否继续？";
                }
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updateInfoStatus(this.form).then(response => {
                        this.$message({
                            type: 'success',
                            message: '审批成功!'
                        });
                        this.drawer = false;
                        this.getList();
                    });
                }).catch(() => {

                });

            },
            dateDiff(startTime, endTime) {
                let startStamp = Date.parse(startTime.replace(/-/g, '/'));
                let endStamp = Date.parse(endTime.replace(/-/g, '/'));
                let seconds = (endStamp - startStamp) / 1000;
                let day = 0;
                let hour = 0;
                let minute = 0;
                // 时间超过整天
                day = Math.floor(seconds/(24*60*60));
                let hoursSecond = seconds%(24*60*60);
                // 时间超过整小时
                hour = Math.floor(hoursSecond/(60*60));
                let minutesSecond = hoursSecond%(60*60);
                // 时间段超过整分钟
                minute = minutesSecond/60;
                return day + '天' + hour + '小时' + minute + '分钟'
            }
        },
        watch: {
            form: {
                handler: function (newValue, oldValue) {
                    if(this.form.outTime && this.form.comeTime){
                        this.form.passLoadTime = this.dateDiff(this.form.comeTime,this.form.outTime);
                    }
                },
                deep: true
            }
        }
    }
</script>
<style>

  .el-form {
    margin-top: 20px;
  }

  .card-shenhe {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .card-box form {
    margin-top: 20px;
  }

  .out_policy span {
    font-size: 4px;
  }

  .in_policy_div {
    border-bottom: #ccc solid 1px;
    padding: 0 0 10px;
  }

  .in_policy {
    line-height: 20px;
    list-style-type: none;
    font-size: 5px;
    margin: 0;
    padding: 0;
  }

  .div_all {
    display: flex;
  }

  .div2 {
    flex: 1;
  }

  .div1 {
    width: 300px;
    height: 80vh;
    overflow: overlay;
  }

  .box-card {
    margin: 10px;
  }


  .box-card-s {
    height: calc(100% - 20px);
  }

  .btn {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 40px;
  }


  .btn button {
    width: 100px;
    margin: 10px;
  }

  .barrier {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .barrier .el-form-item {
    width: 50%;
  }

  .barrier100 .el-form-item{
    width: 100% !important;
  }

  .el-select .el-input{
    width: 100%!important;
  }


  .barrier .el-form-item--medium .el-form-item__label, .el-col-12 .el-form-item__label, .el-col-24 .el-form-item__label, .gelan .el-form-item__label {
    width: 110px !important;
  }

  .barrier .el-input--medium, .el-col-12 .el-input--medium, .el-col-24 .el-input--medium, .el-form .el-textarea, .barrier .el-cascader,.barrier .el-select  {
    width: calc(100% - 50px);
  }

  .is-bordered-label {
    width: 150px;
  }

  .el-descriptions-item__content {
    min-width: 200px;
  }
</style>
